---
layout: default
---

{{ page.subtitle }}
{{ content }}
<script>
    function handleImageError(image) {
        image.onerror = null;
        image.src = '{{ page.image }}';
    }
</script>

<!-- components -->
<div>
    <section class="Compheading">
        {% if page.components and page.components.size > 0 %}
        <h3>
            Components ( {{ page.components.size }} )
        </h3>
        <p>The Meshery model for {{ page.title }} supports the following components.</p>
        {% endif %}
    </section>

    <section class="componentsSection">
        {% for component in page.components %}
        {% if component.name %}
        <div class="maincontainer">
            <div class="componentimg">
                <img id="logo-dark-light" src="/{{ component.colorIcon }}" alt="{{ component.name }}" onerror="handleImageError(this)" data-logo-for-dark="/{{ component.whiteIcon }}"
                data-logo-for-light="/{{ component.colorIcon }}" />
            </div>
            <p class="Compitems">{{ component.name }}</p>
        </div>
        {% endif %}
        {% endfor %}
    </section>
</div>
<!-- components end -->
{% include_cached integration/models-components.html %}
{% include_cached integration/meshery-registry.html %}

{% if page.suggested-reading != false and page.title and page.type and page.category and page.url %}
{% assign related_models_by_category = site.models | where_exp: "model", "model.integrations-category == page.integrations-category" %}
{% include_cached suggested-reading.html reading=related_models_by_category h2_text="Related Models" title=page.title type=page.type category=page.category
url=page.url language="en" %}
{% endif %}